<template>
    <div class="mb-menu">
        <div class="menu-wrap">
            <div v-for="item of props.menuData" :key="'menu' + item.id" class="menu-item" @click="menuChange(item)">
                <div class="menu-item-name">{{ item.name }}</div>
                <div class="menu-item-icon">
                    <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
                        class="mobile-sub-menu-caret-icon">
                        <g data-name="Caret right - 16">
                            <path
                                d="M5.5,15a.47.47,0,0,1-.35-.15.48.48,0,0,1,0-.7L11.29,8,5.15,1.85a.48.48,0,0,1,0-.7.48.48,0,0,1,.7,0l6.5,6.5a.48.48,0,0,1,0,.7l-6.5,6.5A.47.47,0,0,1,5.5,15Z">
                            </path>
                        </g>
                    </svg>
                </div>
            </div>
            <el-divider />
            <div class="href-menu-wrap">
                <div class="href-menu-item">
                    <a>Careers</a>
                </div>
                <div class="href-menu-item">
                    <a>Investors</a>
                </div>
                <div class="href-menu-item">
                    <a>Suppliers</a>
                </div>
                <div class="href-menu-item">
                    <a>Contact us</a>
                </div>
                <div class="href-menu-item">
                    <a>My Bookmarks</a>
                </div>
            </div>
        </div>
        <div class="sub-menu-wrap" :style="{ left: showSubMenu ? 0 : '100%' }">
            <div class="sub-menu-header" @click="closeSubMenu">
                <div class="sub-menu-header-icon">
                    <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
                        class="mobile-sub-menu-caret-icon">
                        <g data-name="Caret Left - 16">
                            <path
                                d="M11,15a.47.47,0,0,1-.35-.15l-6.5-6.5a.48.48,0,0,1,0-.7l6.5-6.5a.48.48,0,0,1,.7,0,.48.48,0,0,1,0,.7L5.21,8l6.14,6.15a.48.48,0,0,1,0,.7A.47.47,0,0,1,11,15Z">
                            </path>
                        </g>
                    </svg>
                </div>
                <div class="sub-menu-header-name">{{ menuItem.name }}</div>
            </div>
            <div class="sub-menu-content">
                <div v-for="subItem of menuItem.children" :key="'menu' + subItem.id" class="sub-menu-item"
                    :class="subMenuItem.code === subItem.code ? 'sub-menu-item-active' : ''"
                    @click="subMenuChange(subItem)">
                    <div class="sub-menu-item-header">
                        <div class="sub-menu-item-name">{{ subItem.name }}</div>
                        <div class="sub-menu-item-icon">
                            <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                viewBox="0 0 16 16" class="mobile-sub-menu-caret-icon">
                                <g data-name="Caret Down - 16">
                                    <path
                                        d="M8,11.5a.47.47,0,0,1-.35-.15l-6.5-6.5a.48.48,0,0,1,0-.7.48.48,0,0,1,.7,0L8,10.29l6.15-6.14a.49.49,0,0,1,.7.7l-6.5,6.5A.47.47,0,0,1,8,11.5Z">
                                    </path>
                                </g>
                            </svg>
                        </div>
                    </div>
                    <div v-if="subMenuItem.code === subItem.code && subMenuItem.children !== undefined && subMenuItem.children.length > 0"
                        class="child-menu-content">
                        <div v-for="childItem of subMenuItem.children" class="child-menu-item"
                            @click="childMenuChange(childItem)">
                            <a class="child-menu-item-name">{{ childItem.name }}</a>
                        </div>
                    </div>
                </div>
                <el-divider />
                <div class="href-menu-wrap">
                    <div class="href-menu-item">
                        <a>Careers</a>
                    </div>
                    <div class="href-menu-item">
                        <a>Investors</a>
                    </div>
                    <div class="href-menu-item">
                        <a>Suppliers</a>
                    </div>
                    <div class="href-menu-item">
                        <a>Contact us</a>
                    </div>
                    <div class="href-menu-item">
                        <a>My Bookmarks</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, defineProps } from 'vue'
const props = defineProps(['currentMenuUrl', 'menuData'])
let emit = defineEmits(['close-menu'])
let menuItem = ref({})
let subMenuItem = ref({})
let showSubMenu = ref(false)
function menuChange(item) {
    menuItem.value = item
    showSubMenu.value = true
}
function closeSubMenu() {
    showSubMenu.value = false
}
function subMenuChange(childItem) {
    if (subMenuItem.value.code === childItem.code) {
        subMenuItem.value = {}
    } else {
        subMenuItem.value = childItem
    }
}
function childMenuChange(childItem) {
    console.log(childItem)
    closeSubMenu()
    emit('close-menu')
}
</script>
<style lang="scss" scoped>
.mb-menu {
    padding: 40px 24px;
    box-sizing: border-box;
    position: relative;
    overflow-x: hidden;
    height: 100%;
}

.menu-wrap {
    .menu-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
        color: #222222;
        cursor: pointer;
    }
}

.href-menu-wrap {
    .href-menu-item {
        margin-bottom: 16px;
        cursor: pointer;

        a {
            color: var(--interaction);
        }

        &:hover {
            a {
                text-decoration: underline;
            }
        }
    }
}

.sub-menu-wrap {
    position: absolute;
    width: 100%;
    top: 0;
    left: 100%;
    transition: 1s;
    background-color: #fff;
    padding-top: 0;
    box-sizing: border-box;
    z-index: 1000;

    .sub-menu-header {
        display: flex;
        align-items: center;
        color: #6022a6;
        padding: 40px 24px 24px;
        box-sizing: border-box;
        cursor: pointer;

        .sub-menu-header-icon {
            display: flex;
            align-items: center;

            svg {
                fill: var(--interaction);
                margin-right: 11px;
                width: 16px;
                height: 16px;
            }
        }
    }

    .sub-menu-content {
        padding: 0 24px 72px;
    }

    .sub-menu-item {
        margin-bottom: 16px;

        .sub-menu-item-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;
            color: #222222;
            cursor: pointer;
        }

        .sub-menu-item-name {}

        .sub-menu-item-icon {

            display: flex;
            align-items: center;

            svg {
                fill: var(--interaction);
                width: 16px;
                height: 16px;
            }
        }

        .child-menu-content {
            margin-bottom: 8px;
            margin-top: 16px;
            display: flex;
            flex-direction: column;
            transition: all .5s ease-in-out;

            .child-menu-item {
                .child-menu-item-name {
                    color: #5b5b67;
                    font-size: 18px;
                    line-height: 28px;
                    margin-bottom: 12px;
                    display: inline-block;

                    &:hover {
                        text-decoration: underline;
                        transform: matrix(.98, 0, 0, .98, 0, 0);
                        transition: all .5s cubic-bezier(.47, 0, .745, .715);
                    }
                }
            }
        }
    }

    .sub-menu-item-active {
        svg {}
    }
}</style>